<template>
    <div style="height: 90%">
        <el-row :gutter="20" class="page-row">
         <el-col :span="12" style="height: 100%">
             <Calendar />
         </el-col>
         <el-col :span="12">
             <el-row :gutter="10" class="clock-bar">
                <el-col :span="10" style="text-align: center">
                    <clock size="200px" color="#FFFFFF" bg="#4AB7BD"></clock>
                </el-col>
                 <el-col :span="14">
                     <el-card class="clock-box-card">
                         <vue-seamless-scroll :data="listData" :class-option="defaultOption" >
                             <div v-for="(item, index) in listData" :key='index'>
                                 <div class="welcome">{{ item.title }}</div>
                                 <div class="welcome-content">{{ item.content }}</div>
                                 <div class="welcome-content" style="color: #67C23A">
                                     {{ item.icon }}
                                 </div>
                             </div>
                         </vue-seamless-scroll>
                     </el-card>
                 </el-col>
             </el-row>
             <div style="height: 50px"></div>
             <el-row class="map-bar">
                 <el-col :span="24">
                     <div style="display: flex; justify-content: center">
                         <div id="mapchart" style="width: 600px; height: 400px;"></div>
                     </div>
                 </el-col>
             </el-row>
         </el-col>
        </el-row>
    </div>
</template>

<script>
    import Clock from 'vue-clock2'
    import vueSeamlessScroll from 'vue-seamless-scroll'
    import echarts from "echarts"
    import "echarts/map/js/china.js"
    import Calendar from "@/components/Calendar";

    const option = {
        title: {
            text: '今日疫情',
            show: true,
            x: 'center',
            top: '5%',
            textStyle: {
                color: '#e74c3c',
                fontStyle: 'normal',
                fontFamily: 'Microsoft YaHei'
            }
        },
        tooltip: {
            //  鼠标移入时的提示信息
            // 类型
            tigger: 'item',
            // b 区域名称 c 合并数值 a 系列名称
            formatter: '地区：{b}<br/>确诊：{c} '
        },
        series: [
            {
                type: 'map',//地图类型
                map: 'china',//地图名字（与导入文件名字一致
                layoutCenter: ['50%', '50%'],//定义地图中心在屏幕中的位置
                layoutSize: 430,
                label: {
                    show: true,
                    color: '#000',
                    fontSize: '10px'
                },
                itemStyle: {
                    borderColor: '#b1b1b1'
                },
                // data: [
                //   {name: '湖北', value: 20057},
                //   {name: '福建', value: 1547},
                //   {name: '黑龙江', value: 316},
                //   {name: '西藏', value: 69},
                //   {name: '甘肃', value: 4},
                // ],
                zoom: 1,
                emphasis: {
                    lable: {
                        color: '#fff',
                        fontSize: '10px'
                    },
                    itemStyle: {
                        areaColor: '#c7fffd'
                    }
                }
            }
        ],
        visualMap: {
            type: 'piecewise',
            pieces: [
                { min: 10000 }, // 不指定 max，表示 max 为无限大（Infinity）。
                { min: 1000, max: 9999 },
                { min: 100, max: 999 },
                { min: 10, max: 99 },
                { min: 0, max: 9 }
            ],
            inRange: {
                color: ['#fff', '#ffaa85', '#ff7b69', '#cc2929', '#8c0d0d', '#660208']
            },
            itemWidth: 10,
            itemHeight: 10,
            bottom: '15%',
            left: '0%'
        }
    }
    export default {
        name: "Home",
        components: {
            Clock,
            vueSeamlessScroll,
            Calendar
        },
        data () {
            const item = {
                title: '欢迎来到S.H.I.T. Cloud',
                content: 'SHIT Cloud 你想要的都在这里',
                icon: '（づ￣3￣）づ╭❤～ 祝旅途愉快'
            }
            return {
                listData: Array(30).fill(item),
                mycharts: ''
            }
        },
        mounted() {
            this.mycharts = echarts.init(document.getElementById('mapchart'))
            this.init()
        },
        methods: {
            init () {
                // 使用新浪疫情数据接口获取数据
                this.axios.get('/api/news/wap/fymap2020_data.d.json?_=1580892522427').then(res => {
                    // console.log(res.data.data.list)
                    const list = res.data.data.list.map(item => {
                        return {
                            name: item.name,
                            value: item.econNum
                        }
                    })
                    // 将数据给到地图
                    option.series[0].data = list
                    this.mycharts.setOption(option)
                })
            }
        },
        computed: {
            defaultOption () {
                return {
                    step: 0.08, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        },
        value: new Date()
    }
</script>

<style scoped>
    div.welcome {
        margin-top: 30px;
        text-align: center;
        font-weight: 700;
        color: #F56C6C;
    }
    div.welcome-content {
        margin-top: 30px;
        text-align: center;
        font-weight: 700;
        color: #E6A23C;
    }
    .page-row {
        height: 100%;
    }
    .clock-bar {
        height: 30%;
    }
    .clock-box-card {
        height: 200px;
    }
</style>